<template>
	<view class="height-100 overflow-hidden bg-gray">
		<view class="position-fixed-top" style="z-index: 99;">
			<!-- 分类 -->
			<view class="flex-direction-row justify-around padding-lr padding-tb-xs bg-white">
				<block v-for='(item,index) in typeArray' :key='index'>
					<text class="text-df padding-tb-xsm borderBottomWhite" :class="{'select-on color-df':type==index}"
						@click="typeChange(index)">{{item}}</text>
				</block>
			</view>
		</view>
		<view style="height: 90rpx;"></view>
		<view v-if="newsList.length>0">
			<view class="bg-white padding-sm margin margin-bottom text-df" v-for="(item,index) in newsList"
				@click="goDetail(item.id)">
				<view class="flex align-center ">
					<image :src="item.activityImageUrl" class="widthSty"></image>
					<view class="line-height-x">
						<view class="flex-sub margin-bottom-xs">{{item.name}}</view>
						<view class="margin-bottom-xs">活动类型：{{item.type}}</view>
						<view>状态：{{item.status == 1 ? '进行中' : item.status == 2? '已结束' : '未开始'}}</view>
					</view>
				</view>
				<view class="flex margin-tb-xs">
					<view class="margin-right" v-if="item.activityType == 0">已报名：{{item.signUpTotal }}人</view>
					<view class="margin-right" v-else>已报名：无需报名</view>
					<view>已服务：{{item.serviceTotal || 0}}人</view>
				</view>
				<view class="text-df ">活动时间：{{item.activityStartTime}} 至 {{item.activityEndTime}}</view>
				<view class="registrationSty padding-xsm margin-right" v-if="item.activityType == 0" @click="goService(1,item.id)">报名清单</view>
				<view class="flex justify-around margin-top" v-else>
					<view class="bg-df padding-xsm radius-xl color-white text-center" @click="addService(item.id)">服务</view>
					<view class="bg-df padding-xsm radius-xl color-white text-center" @click="goService(2,item.id)">服务清单</view>
				</view>
			</view>
		</view>
	<!-- 	<view class="text-center  margin-top-xl" >
			暂无活动~
		</view> -->
		<noData v-else/>
	</view>
</template>

<script>
	import noData from "@/components/noData.vue"
	export default {
		components: {
			noData
		},
		onLoad() {
			console.log(uni.getStorageSync('userinfo'));
			this.getNews();
		},
		data() {
			return {
				typeArray: ['全部', '进行中', '未开始', '已结束'],
				type: 0,
				loading: true,
				pageNum: 1,
				newsList: [],
				isPopupVisible: false, // 控制弹框显示
				inputValue: '', // 输入框内容
				selectId: null,
				activeStatus: '', //状态
			}
		},
		// 触底加载
		onReachBottom() {
			this.loading && this.getNews()
		},
		methods: {
			goService(type,id){
				uni.navigateTo({
					url: `/pages/my/serviceList?type=${type}&&activityId=${id}`
				});
			},
			addService(id){
				uni.navigateTo({
					url: `/pages/my/addService?activityId=${id}`
				});
			},
			typeChange(index) {
				if (this.type != index) {
					this.type = index;
					if (index == 1) {
						this.activeStatus = 1;
					} else if (index == 2) {
						this.activeStatus = 0;
					} else if (index == 3) {
						this.activeStatus = 2;
					} else {
						this.activeStatus = '';
					}
					this.pageNum = 1;
					this.newsList = []
					this.getNews()
				}
			},
			async getNews() {
				uni.showLoading({
					mask: true
				})
				// 0,1  全部。推荐
				const res = await uni.$request.post('/activity/queryActivityList', {
					'pageSize': 10,
					'pageNum': this.pageNum,
					'status': this.activeStatus,
					'storeId': uni.getStorageSync('userinfo').storeId
				});
				uni.hideLoading();
				if (res.code == 200) {
					this.newsList = [...this.newsList, ...res.rows]
					if (this.newsList.length === res.total) {
						this.loading = false
					}
					// this.footPrintlist = res.rows;
				} else {
					uni.showModal({
						title: '提示',
						content: '查询失败',
						showCancel: false
					})
				}
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/sell/activeDetail?id=${id}`
				});
			},
		}
	}
</script>

<style scoped>
	.select-on {
		border-bottom: 8rpx solid #ff5722;
	}

	.flex-sub {
		display: -webkit-box;
		/* 使用 flexbox */
		-webkit-box-orient: vertical;
		/* 垂直方向 */
		overflow: hidden;
		/* 超出隐藏 */
		-webkit-line-clamp: 1;
		/* 限制行数为 2 */
		white-space: normal;
		/* 允许文本换行 */
	}

	.widthSty {
		width: 60px;
		height: 60px;
		margin: 20rpx;
	}

	.bg-white {
		position: relative;
	}

	.alreadyJoin {
		position: absolute;
		right: 15px;
		top: 0;
		width: 60px;
		height: 30px;
		line-height: 30px;
		color: #fff;
		text-align: center;
		background-color: #ff5722;
		border-radius: 2px;
		font-size: 14px
	}
	.margin-top-xl{
		margin-top: 200px;
	}
	.registrationSty{
		width: 100px;
		margin-left: 65%;
		background-color: #d93722;
		color: #fff;
		border-radius: 6px;
		text-align: center;
	}
	.color-white{
		width: 100px;
	}
</style>